<!-- druc and drop file upload form -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="/js/drugUploader/fileuploader.css" rel="stylesheet" type="text/css">
        <!--<link href="/js/jquery/ui/css/demos.css" rel="stylesheet" type="text/css">-->
        <!--<link href="/js/jquery/ui/css/smoothness/jquery-ui-1.8.4.custom.css" rel="stylesheet" type="text/css">-->
		<!-- validation -->
		<link rel="stylesheet" href="/js/jQuery-Validation/css/validationEngine.jquery.css" type="text/css" media="screen" charset="utf-8" />
		<script src="/js/jQuery-Validation/js/jquery.validationEngine-en.js" type="text/javascript"></script>
		<script src="/js/jQuery-Validation/js/jquery.validationEngine.js" type="text/javascript"></script>
 
        <script src="/js/drugUploader/fileuploader.js" type="text/javascript">
        </script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript" />        
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"/>
        
        <title>Insert title here</title>
        <style type="text/css">
            .file-uploader {
                width: 300px;
            }
            
           /*
 body {
                font-size: 62.5%;
            }
*/
            
            label, input {
                display: block;
            }
            
            input.text {
                margin-bottom: 12px;
                width: 95%;
                padding: .4em;
            }
            
            fieldset {
                padding: 0;
                border: 0;
                margin-top: 25px;
            }
            
            h1 {
                font-size: 1.2em;
                margin: .6em 0;
            }
            
            div#users-contain {
                width: 350px;
                margin: 20px 0;
            }
            
            div#users-contain table {
                margin: 1em 0;
                border-collapse: collapse;
                width: 100%;
            }
            
            div#users-contain table td, div#users-contain table th {
                border: 1px solid #eee;
                padding: .6em 10px;
                text-align: left;
            }
            
            .ui-dialog .ui-state-error {
                padding: .3em;
            }
            
            .validateTips {
                border: 1px solid transparent;
                padding: 0.3em;
            }
			
			
			
        </style>
       	
    </head>
    <body>
    
    <div align="center" id="QuoteRequest">
    		
		<style type="text/css">
			.FormField{
				border:red 1px solid;
				width:200px;
			}
			/* for another file*/
			.qq-upload-drop-area2 {
			    position:absolute; top:0; left:0; width:100%; height:100%; min-height: 70px; z-index:2;
			    background:#FF9797; text-align:center; 
			}
			.qq-upload-file2, .qq-upload-spinner2, .qq-upload-size2, .qq-upload-cancel2, .qq-upload-failed-text2 {
			    margin-right: 7px;
			}
			.qq-upload-button2 {
			    display:block; /* or inline-block */
			    width: 105px; padding: 2px 0; text-align:center;    
			    background:#880000; border-bottom:1px solid #ddd;color:#fff;
			}
		</style>
		<script type="text/javascript">
        	$(function(){
				 function uploaderMy(){
                    var uploader = new qq.FileUploader({
                        // pass the dom node (ex. $(selector)[0] for jQuery users)
                        element: document.getElementById('file-uploader'),
                        // path to server-side upload script
                        action: '/MyLessonWeb/TestByteArrServlet',
                        sizeLimit: 10485760,
                        onSubmit: function(id, fileName){
                        },
                        allowedExtensions: ['jpg', 'jpeg', 'png', 'gif', 'exe'],
                        onComplete: function(id, fileName, responseJSON){
                            //alert(responseJSON.filePath);
                            //var intw = document.getElementById('qq-upload-list');
                            //intw.innerHTML = '<span class="qq-upload-failed-text"> completed </span>'
                        },
                    });
                }
				function uploaderMy2(){
                    var uploader = new qq.FileUploader({
                        // pass the dom node (ex. $(selector)[0] for jQuery users)
                        element: document.getElementById('file-uploader2'),
                        // path to server-side upload script
                        action: '/MyLessonWeb/TestByteArrServlet',
                        sizeLimit: 10485760,
                        onSubmit: function(id, fileName){
							
                        },
                        allowedExtensions: ['jpg', 'jpeg', 'png', 'gif', 'exe'],
                        onComplete: function(id, fileName, responseJSON){
                            //alert(responseJSON.filePath);
                            //var intw = document.getElementById('qq-upload-list');
                            //intw.innerHTML = '<span class="qq-upload-failed-text"> completed </span>'
                        },
						template: '<div class="qq-uploader">' + 
				                '<div class="qq-upload-drop-area2"><span>Drop files here to upload</span></div>' +
				                '<div class="qq-upload-button2">Upload a file</div>' +
				                '<ul class="qq-upload-list2"></ul>' + 
				             '</div>',
				
				        // template for one item in file list
				        fileTemplate: '<li>' +
				                '<span class="qq-upload-file2"></span>' +
				                '<span class="qq-upload-spinner2"></span>' +
				                '<span class="qq-upload-siz2e"></span>' +
				                '<a class="qq-upload-cancel2" href="#">Cancel</a>' +
				                '<span class="qq-upload-failed-text2">Failed</span>' +
				            '</li>',
				
				        classes: {
				            // used to get elements from templates
				            button: 'qq-upload-button2',
				            drop: 'qq-upload-drop-area2',
				            dropActive: 'qq-upload-drop-area-active',
				            list: 'qq-upload-list2',
				                        
				            file: 'qq-upload-file2',
				            spinner: 'qq-upload-spinner2',
				            size: 'qq-upload-size2',
				            cancel: 'qq-upload-cancel2',
				
				            // added to list item when upload completes
				            // used in css to hide progress spinner
				            success: 'qq-upload-success2',
				            fail: 'qq-upload-fail2'
				        }
                    });
                }
			uploaderMy();
			uploaderMy2();
			
			/*validations*/
			$("#formID").validationEngine() 
			});    
           
        </script>
    	<form id="formID">
    		<table>
    			<tr>
    				<td>Your Name:<font style="color:red">*</font> </td>
					<td>
						<input type="text" name="YourName" id="YourName" class="FormField" />
					</td>
    			</tr>
				<tr>
    				<td> Company Name: </td>
					<td>
						<input type="text" name="CompanyName" id="CompanyName" class="FormField" />
					</td>
    			</tr>
				<tr>
    				<td>Phone Number:<font style="color:red">*</font> </td>
					<td>
						<input type="text" name="YourName" id="YourName" class="FormField" />
					</td>
    			</tr>
				<tr>
    				<td>E-mail Address:<font style="color:red">*</font> </td>
					<td>
						<input type="text" name="Email" id="Email" class="validate[required,email] FormField" />
					</td>
    			</tr>
				<tr>
    				<td>Number of developers needed (if known):</font> </td>
					<td>
						<input type="text" name="NumberDeveloper" id="NumberDeveloper" class="FormField" />
					</td>
    			</tr>
				<tr>
    				<td>Preferred Platform/Programming Language:</font> </td>
					<td>
						<input type="text" name="ProgramingLang" id="ProgramingLang" class="FormField" />
					</td>
    			</tr>
				<tr>
    				<td>Project duration (if known):</font> </td>
					<td>
						<input type="text" name="ProjectDuration" id="ProjectDuration" class="FormField" />
					</td>
    			</tr>
				<tr>
    				<td>Specification if available:</font> </td>
					<td>
						<input type="text" name="SpecAvail" id="SpecAvail" class="FormField" />
					</td>
    			</tr>
				<tr>
    				<td>Specification if available:</font> </td>
					<td>
						<!--<input type="file" name="Specification" id="Specification" class="FormField" />-->
						<div id="file-uploader">
					            <noscript>
					                <p>
					                    Please enable JavaScript to use file uploader.
					                </p>
					                <!-- or put a simple form for upload here -->
					            </noscript>
					    </div>
					</td>
    			</tr>
				<tr>
    				<td>Prototype required:</font> </td>
					<td>
						<input type="text" name="prototype" id="prototype" class="FormField" />
					</td>
    			</tr>
				<tr>
    				<td>Testing service required:</font> </td>
					<td>
						<input type="text" name="testing" id="testing" class="FormField" />
					</td>
    			</tr>
				<tr>
    				<td>Graphic design requirements, if any:</font> </td>
					<td>
						<input type="text" name="graphic" id="graphic" class="FormField" />
					</td>
    			</tr>
				<tr>
    				<td>Documentation available:</font> </td>
					<td>
						<!--<input type="file" name="documentation" id="documentation" class="FormField" />-->
						<div id="file-uploader2">
					            <noscript>
					                <p>
					                    Please enable JavaScript to use file uploader.
					                </p>
					                <!-- or put a simple form for upload here -->
					            </noscript>
					    </div>
					</td>
    			</tr>
				<tr>
    				<td>Status of Project (New, Continue, Testing):</font> </td>
					<td>
						<input type="text" name="status" id="status" class="FormField" />
					</td>
    			</tr>
				<tr>
					<td>
						<div class="require"><span style="color:red" >*</span> - required fields</div>			
					</td>
					<td></td>
				</tr>				
    		</table>
			<button onclick=""> SEND </button>
			<input type="submit" value="Validate &amp; Send the form!" class="submit">
    	</form>
	</div>
	
		
		
<div style="visibility:hidden;" id="dialog-form" title="Create new user">
	<p class="validateTips">All form fields are required.</p>

	<form>
	<fieldset>
		<label for="YourName">Your Name</label>
		<input type="text" name="YourName" id="YourName" class="text ui-widget-content ui-corner-all" />
		<label for="CompanyName">Company Name:</label>
		<input type="text" name="CompanyName" id="CompanyName" class="text ui-widget-content ui-corner-all" />
		
		<label for="CompanyName">Company Name:</label>
		<input type="text" name="CompanyName" id="CompanyName" class="text ui-widget-content ui-corner-all" />
		
		
		<label for="email">Email</label>
		<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
		<label for="password">Password</label>
		<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
	</fieldset>
	</form>
	<br>
	<div id="file-uploader">
            <noscript>
                <p>
                    Please enable JavaScript to use file uploader.
                </p>
                <!-- or put a simple form for upload here -->
            </noscript>
    </div>
</div>

	
<button id="create-user">Create new user</button>


		
        
    </body>
</html>